<%-- 
    Document   : department
    Created on : 2012-8-27, 15:48:03
    Author     : Danny Lee @ CMTI
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <title>部门管理</title>
        <%@include file="/WEB-INF/jspf/top_easyui.jspf" %>
        <script type="text/javascript">
            function del(id) {
                var selected = $('#list_dept').treegrid('getSelected');
                if (selected.id === 1) {
                    $.messager.alert('提示', '总经理节点不可删除！', 'warning');
                } else {
                    $.messager.confirm('删除确认', '您确定要删除部门：' + selected.text + '吗？', function (r) {
                        if (r) {
                            $.ajax({
                                url: '${contextPath}/dept/delete.json?deptId=' + selected.id,
                                success: function (data) {
                                    if (data.success) {
                                        $.messager.alert('提示', '删除成功！', "info");
                                        $('#list_dept').treegrid('reload');
                                        $('#struture_chart').attr('src', '${contextPath}/dept/list/ui/chart');
                                        $('#parent_dept').combotree('reload');
                                    } else {
                                        $.messager.alert("提示", "无法删除部门：" + selected.text + "！<br>" + data.errMsg, "error");
                                    }
                                }
                            });
                        }
                    });
                }
            }
            function modify(id) {
                var selected = $('#list_dept').datagrid('getSelected');
                if (selected.id === 1) {
                    $.messager.alert('提示', '总经理节点不可编辑！', 'warning');
                } else {
                    $.ajax({
                        url: "${contextPath}/dept/modify/ui.json",
                        success: function () {
                            // 填充数值
                            $('#dept_Id').val(selected.id);
                            $('#dept_name').textbox('setValue', selected.text);
                            $('#dept_remark').textbox('setValue', selected.attributes.remark);
                            $('#parent_dept').combotree('setValue', selected.attributes.pId);

                            $('#add_dept_dialog').dialog({title: '修改部门'});
                            $('#add_dept_dialog').dialog('open');

                            $('#add_dept_bt').hide();
                            $('#update_dept_bt').show();
                        }
                    });
                }
            }
            function addNext(id) {
                var selected = $('#list_dept').datagrid('getSelected');
                $.ajax({
                    url: "${contextPath}/dept/add/ui.json",
                    success: function () {
                        $('#parent_dept').combotree('setValue', selected.id);
                        $('#add_dept_dialog').dialog({title: '新增下级部门'});
                        $('#add_dept_dialog').dialog('open');
                        $('#add_dept_bt').show();
                        $('#update_dept_bt').hide();
                    }
                });
            }
            $(function () {
                //预览面板
                var prePanelHeight = $(window).height() * 0.65;
                // preview_panel里面的内容
                var prePanelContent = '<iframe src="${contextPath}/dept/list/ui/chart" frameborder="0" id="struture_chart" style="height:500px;width: 100%; "/>';

                function initPreviewPanel() {
                    $('body').layout('add', {
                        region: 'south', id: 'preview_panel', title: '预览面板', split: true, height: prePanelHeight, border: false, collapsible: false,
                        content: prePanelContent
                    });
//                     预览窗口标题栏border-top
                    $('#preview_panel').panel('header').css("border-top-width", "1px");
                }
                initPreviewPanel();
                //预览面板按钮
                $('#btn_preview_panel').click(function () {
                    if ($(this).linkbutton('options').selected) {
//                        $('#main_container').addClass('bottom-border');
                        initPreviewPanel();
                    } else {
                        $('body').layout('remove', 'south');
//                        $('#main_container').removeClass('bottom-border');
                    }
                });
                var upOptions = {
                    type: "POST",
                    dataType: "json",
                    beforeSubmit: function () {
                        return $("#add_dept_form").form('validate');//返回表单验证是否成功，成功返回true，表单进行提交，失败返回false，表单无法提交
                    },
                    //表单提交成功后执行
                    success: function (data) {
                        if (data.success) {
                            $.messager.alert('友情提示', '保存成功！', 'info');
                            $('#add_dept_dialog').dialog('close');
                            $('#list_dept').treegrid('reload');
                            $('#struture_chart').attr('src', '${contextPath}/dept/list/ui/chart');
                            $('#parent_dept').combotree('reload');
                        } else {
                            $.messager.alert("友情提示", "保存失败，请稍后再试！", "error");
                        }
                    }
                };
                $('#parent_dept').combotree({
                    onChange: function (newValue, oldValue) {
                        if ($('#dept_Id').val()) {
                            if (newValue == $('#dept_Id').val()) {
                                $.messager.alert("错误", "上级部门不能为自己！<br>请重新选择！", "error");
                                $(this).combotree('clear');
                                $(this).combotree('setValue', oldValue);
                                return;
                            }
                        }
                        var depts = $('#list_dept').treegrid('getRows');
                        // 循环获取对应的部门详情
                        var dept;
                        for (var i in depts) {
                            if (depts[i].id == newValue) {
                                dept = depts[i];
                                break;
                            }
                        }
                    }
                });
                $('#add_dept_dialog').dialog({
                    iconCls: 'icon-department',
                    width: 400, height: 300,
                    closed: true, modal: true,
                    buttons: [{
                            id: 'add_dept_bt',
                            text: '增加',
                            iconCls: 'icon-save',
                            handler: function () {
                                upOptions.url = "${contextPath}/dept/add/action.json";
                                $("#add_dept_form").ajaxSubmit(upOptions);
                            }
                        }, {
                            id: 'update_dept_bt',
                            text: '保存',
                            iconCls: 'icon-fileupdate',
                            handler: function () {
                                upOptions.url = "${contextPath}/dept/modify/action.json";
                                $("#add_dept_form").ajaxSubmit(upOptions);
                            }
                        }, {
                            text: '取消',
                            handler: function () {
                                $('#add_dept_dialog').dialog('close');
                            }
                        }],
                    onBeforeClose: function () {
                        $(this).form('clear');
                    }
                });
                $('#btn_add').click(function () {
                    $.ajax({
                        url: "${contextPath}/dept/add/ui.json",
                        success: function () {
                            //   $('#parent_dept').combotree('setValue', 0);
                            $('#add_dept_dialog').dialog({title: '新增部门'});
                            $('#add_dept_dialog').dialog('open');

                            $('#add_dept_bt').show();
                            $('#update_dept_bt').hide();
                        }
                    });
                });
                $("#list_dept").treegrid({
                    singleSelect: true, //多选
                    fit: true,
                    border: false,
                    fitColumns: true, //自动调整各列，用了这个属性，下面各列的宽度值就只是一个比例。  
                    striped: true, //奇偶行颜色不同  
                    url: "${contextPath}/dept/list/deptTree.json",
                    idField: 'id', //主键字段  
                    treeField: 'text',
                    queryParams: {},
                    rownumbers: true, //显示行号
                    loadMsg: "正在加载，请稍候...", //远程加载时的提示信息
                    columns: [[
                            {field: 'oper', title: '操作', width: 20, align: 'center',
                                formatter: function (value, row, index) {
                                    var operContent = '';
            <shiro:hasPermission name="dept:add:*">
                                    operContent += '<a href="javascript:addNext(' + row.id + ');" class="tdmenuImg"><img title="增加下级" src="${contextPath}/resources/css/icons/node_tree.png"/></a>';
            </shiro:hasPermission>
            <shiro:hasPermission name="dept:modify:*">
                                    operContent += '<a href="javascript:modify(' + row.id + ');" class="tdmenuImg"><img title="修改" src="${contextPath}/resources/css/icons/pencil.png"/></a>';
            </shiro:hasPermission>
            <shiro:hasPermission name="dept:delete:*">
                                    operContent += '<a href="javascript:del(' + row.id + ');" class="tdmenuImg"><img title="删除" src="${contextPath}/resources/css/icons/delete.png"/></a>';
            </shiro:hasPermission>
                                    return operContent;
                                }
                            },
                            {field: 'text', title: '部门名称', width: 45, sortable: true},
                            {field: 'remark', title: '备注', width: 45, sortable: false,
                                formatter: function (value, row, index) {
                                    return row.attributes.remark;
                                }
                            }
                        ]]
                });

                // 注册全局ajax错误处理函数
                $(document).ajaxError(new jQueryAjaxErrorHandler());
            });
        </script>
    </head>
    <body class="easyui-layout">
        <script type="text/javascript">
            $("body").mask({
                maskMsg: '<div class="loading_text"><img src="${contextPath}/resources/images/loading_2.gif"/><span>正在初始化，请稍后...</span></div>',
                opacity: 1
            });
            $(function () {
                $("body").mask('hide');
            })
        </script>
        <div region="north" data-options="border:false" class="" style="height:40px;padding-left:2px;overflow:hidden;position:relative;border-bottom-width: 1px; ">
            <div style="padding-left: 5px;padding-top: 5px;">
                <shiro:hasPermission name="dept:add:*">
                    <a href="#" id="btn_add" class="easyui-linkbutton" style="float:left" data-options="iconCls:'icon-add',plain:true">新增</a>
                </shiro:hasPermission>
            </div>
            <div class="" style="position: absolute;top: 4px;right: 5px;">
                <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-preview-panel',toggle:true,selected:true" id="btn_preview_panel">预览面板</a>
            </div>
        </div>
        <div data-options="region:'center',title:'',border:false" style="border-bottom-width: 1px;">
            <table id="list_dept"></table>
        </div>  

        <!--添加部门对话框-->
        <div id="add_dept_dialog" style="padding:20px 20px 0">
            <form id="add_dept_form"   method="post">
                <input type="hidden" name="id" value="" id="dept_Id"/>
                <div style="margin-bottom: 20px">
                    <input style="width:329px;" data-options="label:'部门名称: '" id="dept_name" name="name" class="easyui-textbox" required="true"/>
                </div>
                <div style="margin-bottom: 20px">
                    <select id="parent_dept" name="pId" class="easyui-combotree" style="width:329px;" data-options="label:'上级部门: ',url:'${contextPath}/dept/list/deptTree.json',required:true"></select>
                </div>
                <div style="">
                    <textarea name="remark" class="easyui-textbox" id="dept_remark" style="width:329px;height:80px" data-options="label:'部门描述: ',multiline:true"></textarea>
                </div>
            </form> 
        </div>
    </body>
</html>
